<!DOCTYPE html>
<html lang="zh-cn">

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="keywords" content="web前端，web前端个人简历，前端开发，全栈开发，李帅帅">
    <meta name="description" content="全栈工程师，顺势而生">
    <title>全栈开发</title>
    <!-- 进度条 -->
    <script src="./js/pace.min.js"></script>
    <link rel="shortcut icon" href="./favicon.ico">
    <!-- Bootstrap -->
    <link href="css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" href="./css/swiper.min.css">
    <link rel="stylesheet" href="./css/style.css">
    <link rel="stylesheet" href="./css/animate.min.css">
    <!-- 百度统计代码 -->
    <script>
        var _hmt = _hmt || [];
        (function () {
            var hm = document.createElement("script");
            hm.src = "https://hm.baidu.com/hm.js?c2dbfb2d17e75ca3155b7fc3b20a9ecc";
            var s = document.getElementsByTagName("script")[0];
            s.parentNode.insertBefore(hm, s);
        })();
    </script>
    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
    <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
    <script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
    <![endif]-->
</head>

<body>
    <!-- 个人信息 start-->
    <div class="header" id="HOME">
        <div class="container">
            <div class="banner-info animated fadeInDown wow">
                <div class="col-md-7 header-right">
                    <h1>Hi !</h1>
                    <h6>I'm Li Shuai shuai</h6>
                    <ul class="address">
                        <li>
                            <ul class="address-text">
                                <li><b>NAME</b></li>
                                <li>李&nbsp;帅&nbsp;帅</li>
                            </ul>
                        </li>
                        <li>
                            <ul class="address-text">
                                <li><b>D.O.B</b></li>
                                <li>09-05-1992</li>
                            </ul>
                        </li>
                        <li>
                            <ul class="address-text">
                                <li><b>QQ </b></li>
                                <li>837660640</li>
                            </ul>
                        </li>
                        <li>
                            <ul class="address-text">
                                <li><b>ADDRESS </b></li>
                                <li>天&nbsp;&nbsp;津</li>
                            </ul>
                        </li>
                        <li>
                            <ul class="address-text">
                                <li><b>DEGREE </b></li>
                                <li>本&nbsp;&nbsp;科</li>
                            </ul>
                        </li>
                        <li>
                            <ul class="address-text">
                                <li><b>E-MAIL </b></li>
                                <li><a href="mailto:lishuaishuai_it@163.com"> lishuaishuai_it@163.com</a></li>
                            </ul>
                        </li>
                    </ul>
                </div>
                <div class="col-md-5 header-left">
                    <img src="img/img1.png" alt="">
                </div>
                <div class="clearfix"></div>
            </div>
        </div>
        <span class="star star1"></span>
        <span class="star star2"></span>
    </div>
    <!-- 个人信息 end-->
    <!-- 我的技能 start-->
    <div class="skills" id="SKILLS">
        <div class="title">
            <img class="animated zoomIn wow" src="./img/skill_title.png" alt="">
        </div>
        <div class="time">
            <div id="screen"></div>
            <canvas id="clock" width="250px" height="250px">
            </canvas>
        </div>
        <div class="skill">
            <div class="container container_bottom">
                <div class="service-head one text-center ">
                    <h4 class="animated rotateInDownLeft wow">WHAT I DO</h4>
                    <h3>MY <span>SKILLS</span></h3>
                    <span class="border two"></span>
                </div>
                <div class="row">
                    <div class="col-md-4 col-sm-6">
                        <!-- normal -->
                        <div class="ih-item square effect1 bottom_to_top animated flipInX wow">
                            <a href="javascript:void(0)">
                                <div class="img"><img src="img/html.png" alt="img"></div>
                                <div class="info">
                                    <h3>HTML</h3>
                                    <p>3年开发经验，深刻理解W3C标准</p>
                                </div>
                            </a>
                        </div>
                        <!-- end normal -->
                    </div>
                    <div class="col-md-4 col-sm-6">
                        <!-- colored -->
                        <div class="ih-item square colored effect2 animated flipInX wow">
                            <a href="javascript:void(0)">
                                <div class="img"><img src="img/css.png" alt="img"></div>
                                <div class="info">
                                    <h3>CSS</h3>
                                    <p>3年开发经验，熟悉页面架构及布局</p>
                                </div>
                            </a>
                        </div>
                        <!-- end colored -->
                    </div>
                    <div class="col-md-4 col-sm-6">
                        <!-- colored -->
                        <div class="ih-item square colored effect3 bottom_to_top animated flipInX wow">
                            <a href="javascript:void(0)">
                                <div class="img"><img src="img/html5.png" alt="img"></div>
                                <div class="info">
                                    <h3>HTML5</h3>
                                    <p>Canvas、多媒体、表单控件、本地存储</p>
                                </div>
                            </a>
                        </div>
                        <!-- end colored -->
                    </div>
                </div>
                <div class="row">
                    <div class="col-md-4 col-sm-6">
                        <!-- colored -->
                        <div class="ih-item square colored effect4 animated flipInX wow">
                            <a href="javascript:void(0)">
                                <div class="img"><img src="img/css3.png" alt="img"></div>
                                <div class="mask1"></div>
                                <div class="mask2"></div>
                                <div class="info">
                                    <h3>CSS3</h3>
                                    <p>选择器、伸缩布局、三维、图形及特效</p>
                                </div>
                            </a>
                        </div>
                        <!-- end colored -->
                    </div>
                    <div class="col-md-4 col-sm-6">
                        <!-- colored -->
                        <div class="ih-item square colored effect5 left_to_right animated flipInX wow">
                            <a href="javascript:void(0)">
                                <div class="img"><img src="img/javascript.png" alt="img"></div>
                                <div class="info">
                                    <h3>JavaScript</h3>
                                    <p>封装、面向对象、作用域、闭包</p>
                                </div>
                            </a>
                        </div>
                        <!-- end colored -->
                    </div>
                    <div class="col-md-4 col-sm-6">
                        <!-- colored -->
                        <div class="ih-item square colored effect6 from_left_and_right animated flipInX wow">
                            <a href="javascript:void(0)">
                                <div class="img"><img src="img/less.png"></div>
                                <div class="info">
                                    <h3>less</h3>
                                    <p>CSS预处理语言、使CSS更易维护和拓展</p>
                                </div>
                            </a>
                        </div>
                        <!-- end colored -->
                    </div>
                </div>
                <div class="row">
                    <div class="col-md-4 col-sm-6">
                        <!-- colored -->
                        <div class="ih-item square colored effect7 animated flipInX wow">
                            <a href="javascript:void(0)">
                                <div class="img"><img src="img/jquery.png" alt="img"></div>
                                <div class="info">
                                    <h3>jquery</h3>
                                    <p>Write Less，Do More</p>
                                </div>
                            </a>
                        </div>
                        <!-- end colored -->
                    </div>
                    <div class="col-md-4 col-sm-6">
                        <!-- colored -->
                        <div class="ih-item square colored effect8 scale_up animated flipInX wow">
                            <a href="javascript:void(0)">
                                <div class="img"><img src="img/bootstrap.png" alt="img"></div>
                                <div class="info">
                                    <h3>bootstrap</h3>
                                    <p>简洁、直观、强悍的前端开发框架，让web开发更迅速、简单。</p>
                                </div>
                            </a>
                        </div>
                        <!-- end colored -->
                    </div>
                    <div class="col-md-4 col-sm-6">
                        <!-- colored -->
                        <div class="ih-item square colored effect9 left_to_right animated flipInX wow">
                            <a href="javascript:void(0)">
                                <div class="img"><img src="img/nodejs.png" alt="img"></div>
                                <div class="info">
                                    <div class="info-back">
                                        <h3>nodejs</h3>
                                        <p>基于Chrome JavaScript 运行时建立的一个平台 <br>事件驱动I/O服务端JavaScript环境<br>基于Google的V8引擎</p>
                                    </div>
                                </div>
                            </a>
                        </div>
                        <!-- end colored -->
                    </div>
                </div>
                <div class="row">
                    <div class="col-md-4 col-sm-6">
                        <!-- colored -->
                        <div class="ih-item square colored effect10 right_to_left animated flipInX wow">
                            <a href="javascript:void(0)">
                                <div class="img"><img src="img/angularjs.png" alt="img"></div>
                                <div class="info">
                                    <h3>angularjs</h3>
                                    <p>MVC、模块化、自动化双向数据绑定、语义化标签、依赖注入 <br>可以构建一个单一页面应用程序</p>
                                </div>
                            </a>
                        </div>
                        <!-- end colored -->
                    </div>
                    <div class="col-md-4 col-sm-6">
                        <!-- colored -->
                        <div class="ih-item square colored effect11 top_to_bottom animated flipInX wow">
                            <a href="javascript:void(0)">
                                <div class="img"><img src="img/dcloud.png" alt="img"></div>
                                <div class="info">
                                    <h3>dcloud</h3>
                                    <p>5+Runtime、MUI、流应用</p>
                                </div>
                            </a>
                        </div>
                        <!-- end colored -->
                    </div>
                    <div class="col-md-4 col-sm-6">
                        <!-- colored -->
                        <div class="ih-item square colored effect12 top_to_bottom animated flipInX wow">
                            <a href="javascript:void(0)">
                                <div class="img"><img src="img/ionic.png" alt="img"></div>
                                <div class="info">
                                    <h3>ionic</h3>
                                    <p>轻量级、MVVM、命令行工具、性能优越、运行速度快</p>
                                </div>
                            </a>
                        </div>
                        <!-- end colored -->
                    </div>
                </div>
                <div class="row">
                    <div class="col-md-4 col-sm-6">
                        <!-- colored -->
                        <div class="ih-item square colored effect13 left_to_right animated flipInX wow">
                            <a href="javascript:void(0)">
                                <div class="img"><img src="img/reactnative.png" alt="img"></div>
                                <div class="info">
                                    <h3>react native</h3>
                                    <p>在Javascript和React的基础上获得完全一致的开发体验，构建世界一流的原生APP <br>Learn once, write anywhere</p>
                                </div>
                            </a>
                        </div>
                        <!-- end colored -->
                    </div>
                    <div class="col-md-4 col-sm-6">
                        <!-- colored -->
                        <div class="ih-item square colored effect14 left_to_right animated flipInX wow">
                            <a href="javascript:void(0)">
                                <div class="img"><img src="img/wechat.png" alt="img"></div>
                                <div class="info">
                                    <h3>wechat</h3>
                                    <p>WeUI、微信小程序</p>
                                </div>
                            </a>
                        </div>
                        <!-- end colored -->
                    </div>
                    <div class="col-md-4 col-sm-6">
                        <!-- colored -->
                        <div class="ih-item square colored effect15 bottom_to_top animated flipInX wow">
                            <a href="javascript:void(0)">
                                <div class="img"><img src="img/electron.png" alt="img"></div>
                                <div class="info">
                                    <h3>electron</h3>
                                    <p>Electron 提供了一个实时构建桌面应用的纯 JavaScript 环境,构建跨平台（macOS、Windows、Linux）应用。</p>
                                </div>
                            </a>
                        </div>
                        <!-- end colored -->
                    </div>
                </div>
            </div>
        </div>
        <div class="more">
            <p><a href="#skillModal" data-toggle="modal">点击查看详情>></a></p>
        </div>
        <!-- Modal -->
        <div class="modal fade" id="skillModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
            <div class="modal-dialog modal-lg" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                            aria-hidden="true">&times;</span></button>
                        <h4 class="modal-title" id="myModalLabel">My skills</h4>
                    </div>
                    <div class="modal-body">
                        <ol>
                            <li>深刻理解W3C标准，熟练运用HTML、CSS等网页制作技术，熟悉页面架构和布局。</li>
                            <li>熟练使用JavaScript、Ajax、JsonP等web开发领域相关技术，熟悉前后端数据交互过程。</li>
                            <li>熟练使用HTML5、CSS3等构建移动端网站、响应式网站。</li>
                            <li>熟练使用主流的JavaScript框架（jQuery、AngularJS、bootstrap、SeaJS）开发。</li>
                            <li>熟悉TCP/IP、HTTP的基本工作原理，及Web常用开发工具。</li>
                            <li>熟悉部分后台语言：nodejs、C#，能够基于.NET平台开发完整的项目。</li>
                            <li>熟悉Hybrid App开发相关技术，了解React、ionic、Cordova、HTML5+等主流框架。</li>
                            <li>熟练使用Bower、npm 、Git等包和代码管理工具。</li>
                            <li>熟练使用CSS预编译语言：Less，了解Sass。</li>
                            <li>熟悉WeUI、微信小程序。</li>
                            <li>熟悉基于Electron构建跨平台桌面应用。</li>
                            <li>了解 Python、Java等后台开发语言，熟悉SQL Server、MySql数据库使用。</li>
                            <li>了解node+mongodb建站、安卓原生应用开发及微信服务号开发。</li>
                            <li>了解Vue.js、ElementUI框架。</li>
                        </ol>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- 我的技能 end-->
    <!-- 我的经历 start-->
    <div class="story" id="STORY">
        <div class="bg"></div>
        <div class="container">
            <div class="service-head one text-center ">
                <h4 class="animated rotateInDownLeft wow">EXPERIENCE</h4>
                <h3>MY <span>EXPERIENCE</span></h3>
                <span class="border two"></span>
            </div>
            <div class="center">
                <div class="swiper-container swiper-container1">
                    <div class="swiper-wrapper">
                        <div class="swiper-slide">
                            <p class="ani title" swiper-animate-effect="bounceInDown" swiper-animate-duration="0.5s" swiper-animate-delay="0.2s">天津大学仁爱学院</p>
                            <p class="ani time" swiper-animate-effect="fadeInRight" swiper-animate-duration="0.5s" swiper-animate-delay="0.3s">2012年9月 - 2016年7月</p>
                            <p class="ani txt" swiper-animate-effect="fadeInRight" swiper-animate-duration="0.5s" swiper-animate-delay="0.4s">计算机科学与技术系</p>
                            <p class="ani txt" swiper-animate-effect="fadeInRight" swiper-animate-duration="0.5s" swiper-animate-delay="0.5s">计算机科学与技术专业</p>
                            <p class="ani txt" swiper-animate-effect="fadeInRight" swiper-animate-duration="0.5s" swiper-animate-delay="0.5s">C、C++、C#、Java、Android、Html、Css、SQL Server</p>
                        </div>
                        <div class="swiper-slide">
                            <p class="ani title" swiper-animate-effect="bounceInDown" swiper-animate-duration="0.5s" swiper-animate-delay="0.2s">天津方普信科技有限公司</p>
                            <p class="ani time" swiper-animate-effect="fadeInRight" swiper-animate-duration="0.5s" swiper-animate-delay="0.3s">2015年9月 - 2016年1月</p>
                            <p class="ani txt" swiper-animate-effect="fadeInRight" swiper-animate-duration="0.5s" swiper-animate-delay="0.4s">研发部（实习）</p>
                            <p class="ani txt" swiper-animate-effect="fadeInRight" swiper-animate-duration="0.5s" swiper-animate-delay="0.5s">C#、XML、WPF</p>
                        </div>
                        <div class="swiper-slide">
                            <p class="ani title" swiper-animate-effect="bounceInDown" swiper-animate-duration="0.5s" swiper-animate-delay="0.2s">传智博客·黑马</p>
                            <p class="ani time" swiper-animate-effect="fadeInRight" swiper-animate-duration="0.5s" swiper-animate-delay="0.3s">2016年2月 - 2016年7月</p>
                            <p class="ani txt" swiper-animate-effect="fadeInRight" swiper-animate-duration="0.5s" swiper-animate-delay="0.4s">前端与移动开发学院</p>
                            <p class="ani txt" swiper-animate-effect="fadeInRight" swiper-animate-duration="0.5s" swiper-animate-delay="0.5s">CSS3、HTML5、JavaScript、jQuery、Bootstrap、AngularJs、</p>
                            <p class="ani txt" swiper-animate-effect="fadeInRight" swiper-animate-duration="0.5s" swiper-animate-delay="0.5s">SeaJS、React、ionic、Cordova、HTML5+、NodeJs</p>
                        </div>
                        <div class="swiper-slide">
                            <p class="ani title" swiper-animate-effect="bounceInDown" swiper-animate-duration="0.5s" swiper-animate-delay="0.2s">天津颐博数码科技有限公司</p>
                            <p class="ani time" swiper-animate-effect="fadeInRight" swiper-animate-duration="0.5s" swiper-animate-delay="0.3s">2016年7月 - 至今</p>
                            <p class="ani txt" swiper-animate-effect="fadeInRight" swiper-animate-duration="0.5s" swiper-animate-delay="0.4s">APP研发部</p>
                            <p class="ani txt" swiper-animate-effect="fadeInRight" swiper-animate-duration="0.5s" swiper-animate-delay="0.5s">Web前端开发</p>
                            <p class="ani txt" swiper-animate-effect="fadeInRight" swiper-animate-duration="0.5s" swiper-animate-delay="0.5s">WeUI、微信小程序、ElementUI、PHP、MySql</p>
                        </div>
                    </div>
                    <div class="swiper-pagination"></div>
                    <div class="swiper-button-prev"></div>
                    <div class="swiper-button-next"></div>
                </div>
            </div>
        </div>
    </div>
    <!-- 我的经历 end-->
    <!-- 项目经验 start-->
    <div class="project" id="PROJECT">
        <div class="container">
            <div class="service-head one text-center ">
                <h4 class="animated rotateInDownLeft wow">PROJECT</h4>
                <h3 style="color: #000">MY <span>PROJECT</span></h3>
                <span class="border two"></span>
            </div>
            <div class="content" id="projectCon">
                <div class="work_info animated fadeInRight wow even clearfix">
                    <div class="col-sm-6 work_right">
                        <h5>廊坊云服务平台</h5>
                        <p class="fw">项目描述：</p>
                        <p class="retract">涵盖企业信息化、企业服务、众包服务、企业库等模块，促进企业变革、打造智慧产业。</p>
                        <p class="fw">职责描述：</p>
                        <p class="retract">HTML页面的构建、CSS样式美化</p>
                        <p class="retract">JavaScript、angularJs、Ajax实现前后端数据交互</p>
                        <p class="retract">测试</p>
                    </div>
                    <div class="col-sm-6 work_left">
                        <h4>2016.11-2016.12</h4>
                    </div>
                </div>
                <div class="work_info animated fadeInLeft wow clearfix">
                    <div class="col-sm-6 work_left">
                        <h4>2016.09-2016.11</h4>
                    </div>
                    <div class="col-sm-6 work_right">
                        <h5>天津高新区 App</h5>
                        <p class="fw">项目描述：</p>
                        <p class="retract">
                            汇集了天津高新区最丰富的信息化政务服务资源，即时了解政策服务，把握企业动态，洞晓财经热点。应用包含了易注册、易融资、易生活、易指导、Newletter等功能模块。</p>
                        <p class="fw">职责描述： </p>
                        <p class="retract">H5移动页面结构搭建及CSS样式美化 </p>
                        <p class="retract">JavaScript、Ajax实现前后端数据交互及数据展示</p>
                        <p class="retract">后期维护和迭代</p>
                    </div>
                </div>
                <div class="work_info animated fadeInRight wow even clearfix">
                    <div class="col-sm-6 work_right">
                        <h5>大师街拍 App</h5>
                        <p class="fw">项目描述：</p>
                        <p class="retract">
                            大师街拍2.0是在大师街拍1.0基础上的更新迭代，完善了应用生态循环，建立奖励机制，鼓励用户互动；建立应用内部货币系统；增加有偿发帖机制；增加审核区、发视频、商城等。</p>
                        <p class="fw">职责描述：</p>
                        <p class="retract">HTML5页面的构建、CSS样式美化</p>
                        <p class="retract">JavaScript、angularJs、Ajax实现前后端数据交互</p>
                        <p class="retract">Facebook、Twitter分享功能</p>
                        <p class="retract">功能测试，bug修复，后期维护和迭代</p>
                    </div>
                    <div class="col-sm-6 work_left">
                        <h4>2016.07-2016.09</h4>
                    </div>
                </div>
                <div class="more work_info clearfix">
                    <div class="col-sm-6 work_left">
                        <h4>2015.09-2016.01</h4>
                    </div>
                    <div class="col-sm-6 work_right">
                        <h5>眼科信息系统</h5>
                        <p class="fw">项目描述：</p>
                        <p class="retract">
                            数字化眼科系统是对眼科（或者眼镜店）患者进行管理，下达检查项目医嘱，患者检查记录，集成检查结果（主要是检查的图片），生成检查报告，打印报告，患者历史病例对比等功能。</p>
                        <p class="fw">职责描述： </p>
                        <p class="retract">与实际人员沟通，了解项目的实际需求以及任务的分配。 </p>
                        <p class="retract">根据文档构建SQL Server数据库。</p>
                        <p class="retract">患者诊断模块、系统设置模块、新建患者模块、图像导出模块界面（WPF）的实现以及数据交互。</p>
                    </div>
                </div>
            </div>
            <div class="btns">
                <button type="button" class="down btn btn-info">更 多</button>
                <button type="button" class="up btn btn-primary">收 起</button>
            </div>
        </div>
    </div>
    <!-- 项目经验 end-->
    <!-- 我的作品 start-->
    <div class="work" id="WORK">
        <div class="work_bg">
            <div class="container pad_bot">
                <div class="service-head one text-center ">
                    <h4 class="animated rotateInDownLeft wow">DEMO</h4>
                    <h3 style="color: #000">MY <span>WORKS</span></h3>
                    <span class="border two"></span>
                </div>
                <div class="row row_s">
                    <div class="col-sm-12">
                        <div class="col-sm-4">
                            <div>
                                <img src="./img/portfolio1.png" alt="">
                                <div class="title">
                                    <span>京东购物商城</span>
                                    <a href="./works/JD/index.html" target="_Blank">
                                        <span class="glyphicon glyphicon-link"></span>
                                    </a>
                                </div>
                            </div>
                            <div>
                                <img src="./img/portfolio2.png" alt="">
                                <div class="title">
                                    <span>后台管理系统</span>
                                    <a href="javascript:alert('建设中...');">
                                        <span class="glyphicon glyphicon-link"></span>
                                    </a>
                                </div>
                            </div>
                        </div>
                        <div class="col-sm-4">
                            <div>
                                <img src="./img/portfolio3.png" alt="">
                                <div class="title">
                                    <span>美团</span>
                                    <a href="javascript:alert('建设中...');">
                                        <span class="glyphicon glyphicon-link"></span>
                                    </a>
                                </div>
                            </div>
                            <div>
                                <img src="./img/portfolio4.png" alt="">
                                <div class="title">
                                    <span>京东购物商城APP</span>
                                    <a href="javascript:alert('建设中...');">
                                        <span class="glyphicon glyphicon-link"></span>
                                    </a>
                                </div>
                            </div>
                        </div>
                        <div class="col-sm-4">
                            <div>
                                <img src="./img/portfolio5.png" alt="">
                                <div class="title">
                                    <span>微信小程序</span>
                                    <a href="javascript:alert('建设中...');">
                                        <span class="glyphicon glyphicon-link"></span>
                                    </a>
                                </div>
                            </div>
                            <div>
                                <img src="./img/portfolio6.png" alt="">
                                <div class="title">
                                    <span>小米官网</span>
                                    <a href="./works/xiaomi/index.html" target="_Blank">
                                        <span class="glyphicon glyphicon-link"></span>
                                    </a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="more">
                    <a href="javascript:alert('建设中...');">点击查看更多内容>></a>
                </div>
            </div>
        </div>
    </div>
    <!-- 我的作品 end-->
    <!-- 证书荣誉 start -->
    <div class="credential" id="CERTIFICATES">
        <div class="container">
            <div class="service-head one text-center ">
                <h4 class="animated rotateInDownLeft wow">HONOR</h4>
                <h3 style="color: #000">MY <span>CERTIFICATES</span></h3>
                <span class="border two"></span>
            </div>
            <div class="content">
                <div class="row">
                    <div class="col-md-3 col-sm-6 animated zoomIn wow">
                        <div>
                            <a href="javascript:void(0);"><img src="./img/java.jpg" alt=""></a>
                            <div class="txt">
                                <h4>全国计算机专业人才证书</h4>
                                <h5>C/C++（高级）</h5>
                            </div>
                            <div class="txt_2">
                                <h5>证书编号：TECSS0101029901</h5>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-3 col-sm-6 animated zoomIn wow">
                        <div>
                            <a href="javascript:void(0);"><img src="./img/java.jpg" alt=""></a>
                            <div class="txt">
                                <h4>全国计算机专业人才证书</h4>
                                <h5>JAVA软件开发（高级）</h5>
                            </div>
                            <div class="txt_2">
                                <h5>证书编号：TECSS0101030239</h5>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-3 col-sm-6 animated zoomIn wow">
                        <div>
                            <a href="javascript:void(0);"><img src="./img/ibm.jpg" alt=""></a>
                            <div class="txt">
                                <h4>高级软件工程师</h4>
                                <h5>IBM</h5>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-3 col-sm-6 animated zoomIn wow">
                        <div>
                            <a href="javascript:void(0);"><img src="./img/zhige.jpg" alt=""></a>
                            <div class="txt">
                                <h4>职业资格证书</h4>
                                <h5>计算机维修工（中级）</h5>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="more">
                    <p><a href="#credentialModal" data-toggle="modal">点击查看更多内容>></a></p>
                </div>
                <!-- Modal -->
                <div class="modal fade" id="credentialModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
                    <div class="modal-dialog modal-lg" role="document">
                        <div class="modal-content">
                            <div class="modal-header">
                                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                                    aria-hidden="true">&times;</span></button>
                                <h4 class="modal-title">My credential</h4>
                            </div>
                            <div class="modal-body">
                                <ul>
                                    <li>IBM国际软件开发工程师证书--高级</li>
                                    <li>全国软件开发（JAVA）专业人才证书--高级</li>
                                    <li>全国软件开发（C/C++）专业人才证书--高级</li>
                                    <li>蓝桥杯大赛全国二等奖</li>
                                    <li>华北五省全国优秀团队奖</li>
                                    <li>EMC Academic Associate, Information Storage and Management</li>
                                    <li>职业资格证书（计算机维修工）--中级</li>
                                </ul>
                                <ul>
                                    <li>国家励志奖学金</li>
                                    <li>数学建模天津市二等奖</li>
                                    <li>学习标兵</li>
                                    <li>多次三好学生</li>
                                    <li>多次优秀学生干部</li>
                                    <li>优秀班干部</li>
                                    <li>优秀团员</li>
                                    <li>学生会先进工作者</li>
                                    <li>学习优异奖</li>
                                    <li>优秀毕业生</li>
                                </ul>
                            </div>
                            <div class="modal-footer">
                                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- 证书荣誉 end -->
    <!-- 联系我 start-->
    <div class="contact" id="CONTACT">
        <p class="time animated zoomIn wow">2017</p>
        <p class="title animated fadeInDown wow">站在时代的风口</p>
        <p class="content animated fadeInUp wow">全栈工程师</p>
        <p class="follow animated zoomIn wow">
            <span>follow me</span>
        </p>
    </div>
    <!-- 联系我 end-->
    <!-- 底部 start-->
    <div class="bottom">
        <div class="animated bounceInRight wow">
            <p>
                <a href="https://my.oschina.net/lishuaishuai2016" target="_blank">oschina</a>
                <a href="https://www.linkedin.com/in/%E5%B8%85%E5%B8%85-%E6%9D%8E-226145126/" target="_blank">linkedin</a>
                <a href="http://weibo.com/lishuaishuai0609" target="_blank">微博</a>
                <a href="" target="_blank">Github</a>
            </p>
            <p>All Rights Reserved </p>
            <p>京ICP备000000号 Copyright © 2015 - 2016</p>
        </div>
    </div>
    <!-- 底部 end-->
    <!-- 回到顶部 start-->
    <div class="toTop">
        <img src="img/arr.png">
    </div>
    <!-- 回到顶部 end-->
    <!-- 导航栏 start-->
    <div class="nav_fix">
        <div class="container">
            <div class="top-nav">
                <nav class="navbar navbar-default" role="navigation">
                    <div class="container-fluid">
                        <div class="navbar-header">
                            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#example-navbar-collapse">
                            <span class="sr-only">切换导航</span>
                            <span class="icon-bar"></span>
                            <span class="icon-bar"></span>
                            <span class="icon-bar"></span>
                        </button>
                            <a class="navbar-brand animated fadeInLeft " href="javascrip:void(0);">Full Stack Developer</a>
                        </div>
                        <div class="collapse navbar-collapse" id="example-navbar-collapse">
                            <ul class="nav navbar-nav navbar-right animated fadeInRight ">
                                <li class="dropdown active">
                                    <a href="#" class="dropdown-toggle" data-toggle="dropdown">
                                    主页<b class="caret"></b>
                                </a>
                                    <ul class="dropdown-menu">
                                        <li><a href="#SKILLS">技能</a></li>
                                        <li><a href="#STORY">经历</a></li>
                                        <li><a href="#PROJECT">项目</a></li>
                                        <li><a href="#WORK">作品</a></li>
                                        <li><a href="#CERTIFICATES">证书</a></li>
                                        <li><a href="#CONTACT">联系我</a></li>
                                    </ul>
                                </li>
                                <!--<li><a href="javascript:alert('建设中……')">人工智能</a></li>-->
                                <li><a href="./games/zfj/index.html">游戏</a></li>
                                <li><a href="javascript:alert('建设中……')">应用</a></li>
                                <li><a href="file/15620832594.pdf">简历</a></li>
                            </ul>
                        </div>
                    </div>
                </nav>
            </div>
        </div>
    </div>
    <!-- 导航栏 end -->
    <!-- 分享 start-->
    <div class="-mob-share-ui-button -mob-share-open"><span class="glyphicon glyphicon-share"></span></div>
    <div class="-mob-share-ui -mob-share-ui-theme -mob-share-ui-theme-slide-right" style="display: none">
        <ul class="-mob-share-list">
            <li class="-mob-share-weibo">
                <p>新浪微博</p>
            </li>
            <li class="-mob-share-qzone">
                <p>QQ空间</p>
            </li>
            <li class="-mob-share-qq">
                <p>QQ好友</p>
            </li>
            <li class="-mob-share-weixin">
                <p>微信</p>
            </li>
            <li class="-mob-share-linkedin">
                <p>LinkedIn</p>
            </li>
            <li class="-mob-share-facebook">
                <p>Facebook</p>
            </li>
            <li class="-mob-share-twitter">
                <p>Twitter</p>
            </li>
        </ul>
        <div class="-mob-share-close">取消</div>
    </div>
    <div class="-mob-share-ui-bg"></div>
    <script id="-mob-share" src="http://f1.webshare.mob.com/code/mob-share.js?appkey=1aefc87083645"></script>
    <!-- 分享 end-->
    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="./js/jquery.min.js"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="js/bootstrap.min.js"></script>
    <script src="js/clock.js"></script>
    <script src="js/swiper.min.js"></script>
    <script src="js/swiper.animate1.0.2.min.js"></script>
    <script src="js/wow.min.js"></script>
    <script src="js/canvas_clock.js"></script>
    <script>
        $(function () {
            /*滚动 动画 初始化*/
            var wow = new WOW({
                boxClass: 'wow',
                animateClass: 'animated',
                offset: 60,
                mobile: true,
                live: true
            });
            wow.init();

            onNav();

            /*监听屏幕滚动*/
            $(window).scroll(function (event) {
                var winPos = $(window).scrollTop();
                /*显示或隐藏回到顶部按钮*/
                if (winPos > 300) {
                    $(".toTop").fadeIn()
                } else {
                    $(".toTop").fadeOut();
                }
                onNav();
            });

            //回到顶部
            $(".toTop").click(function () {
                $("html,body").animate({
                    scrollTop: 0
                }, 800);
            });

            /* 导航栏颜色渐变 */
            function onNav() {
                var winPos = $(window).scrollTop();
                var opacity = 0;
                if (winPos > 15) {
                    $(".nav_fix .navbar").css("margin-top", "5px");
                } else {
                    $(".nav_fix .navbar").css("margin-top", "15px");
                }
                if (winPos < 500) {
                    opacity = winPos / 500;
                } else {
                    opacity = 1;
                }
                $(".nav_fix").css({
                    background: "rgba(0,0,0," + opacity + ")"
                });
            }

            /* 我的技能加载更多 */
            $('.down').click(function () {
                var divs = $('#projectCon').children();
                var len = $('#projectCon').children().length;
                for (var i = 3; i < len; i++) {
                    $(divs[i]).slideDown();
                }
            });
            $('.up').click(function () {
                $('#projectCon > .more').css("display", "none");
            });
        });
        /*轮播图初始化*/
        var mySwiper1 = new Swiper('.swiper-container1', {
            autoplay: 3000,
            loop: true,
            speed: 1000,
            pagination: '.swiper-pagination',
            spaceBetween: 20,
            prevButton: '.swiper-button-prev',
            nextButton: '.swiper-button-next',
            onInit: function (swiper) {
                swiperAnimateCache(swiper); //隐藏动画元素
                swiperAnimate(swiper); //初始化完成开始动画
            },
            onSlideChangeEnd: function (swiper) {
                swiperAnimate(swiper); //每个slide切换结束时也运行当前slide动画
            }
        });

        /* 移动端时钟 */
        clockd1_ = {
            "indicate": true,
            "indicate_color": "#222",
            "dial1_color": "#666600",
            "dial2_color": "#81812e",
            "dial3_color": "#9d9d5c",
            "time_add": 1,
            "time_24h": true,
            "date_add": 3,
            "date_add_color": "#999"
        };
        var c = document.getElementById('clock');
        cns1_ = c.getContext('2d');
        clock_conti(250, cns1_, clockd1_);

        /* 分享设置 */
        mobShare.config({
            appkey: '1aefc87083645', // appkey
            params: {
                url: 'http://lishuaishuai.bid', // 分享链接
                title: '全栈工程师，顺势而生' // 分享标题
            }
        });
    </script>
</body>

</html>